<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view  class="header" style=" position: fixed,top:0">
			<!-- 定位城市 -->
			<view class="addr"    @tap="showModal">
				<view class="cuIcon-locationfill text-red"></view>
				{{city.name}}
			</view>
			<!-- 搜索框 -->
			<!-- mSearch组件 如果使用原样式，删除组件元素-->
			<mSearch  class="mSearch-input-box" :mode="1" button="inside" placeholder="默认关键字"  @search="serach" @input="inputChange" @confirm="serach" v-model="queryParams.query" style="flex:1"></mSearch>
			<!-- 搜索框 -->
			<!-- <view class="input-box">
				<input placeholder="默认关键字" confirm-type="search" @confirm="serach" v-model="queryParams.query" @input="inputChange"
				 placeholder-style="color:#c0c0c0;" />
				<view class="icon search"></view>
			</view> -->
		
		</view>
		<view class="search-keyword" >
			<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
				<block v-for="(row,index) in keywordList" :key="index">
					<view class="keyword-entry" hover-class="keyword-entry-tap" @tap.stop="doSearch(keywordList[index].keyword)">
						<view class="keyword-text" >
							<rich-text :nodes="row.htmlStr"></rich-text>
						</view>
						<view class="keyword-img" >
							<image src="/static/img/back.png"></image>
						</view>
					</view>
				</block>
				
			</scroll-view>
		</view>
		<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor" :menuList="menuList"
		 @result="result"></sl-filter>
	   <view class="list">
	   	<navigator v-for="(bulding,index) in expertList" :key="bulding.id" :url="'/pages/sale/detail/detail?id='+bulding.id" >
	   		<bulding-item :options="bulding"></bulding-item>
	   	</navigator>
	   
	   </view>
	   
	   <view class="cu-load load-modal" v-if="isLoading">
	   	<view class="cuIcon-emojifill text-orange"></view>
	   	<view class="gray-text">{{loadMoreDefalutText}}</view>
	   </view>

		<uni-drawer :visible="showLeft" mode="left"   @close="closeDrawer">
			
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
				<view class="cu-item arrow" v-for="(item,index) in citys" :key="index">
					<button @tap="tabSelect" :data-city="item" class="content">
						<text class="text-grey">{{item.name}}</text>
					</button>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="hideModal">关闭</button>
			</view>
		</uni-drawer>
			
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import buldingItem from './item.vue';
	import commentItem from '@/pages/comment/item.vue';
	import uniDrawer from '@/components/uni-drawer.vue';
	//引用mSearch组件，如不需要删除即可
	import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';
	
	export default {
		components: {
			slFilter,
			buldingItem,
			commentItem,
			uniDrawer,
			mSearch
		},
		data() {
			return {
			isLoading: false,
			showLeft: false,
			loadMoreText: '加载中...',
			loadMoreDefalutText: '努力加载中...',
			loadMoreNoLeftText: '没有更多了,请掉头行驶...',
			connectionFailText: '连接失败,请检查网络是否断开!',
			emptyText: '什么都没找到哟...',
			expertList: [],
			city:'',
			isShowKeywordList: false,
			keyword: "",
			keywordList: [],
			citys:[],
			isBuildingLeft: true,
			orderByName: false,
			queryParams: {
				query: '',
				channel: 'sale',
				Area:'',
				HouseType:'',
				LetWay:'',
				pageSize: 10,
				page: 1,
				Name:""
			},
			themeColor: '#D1372C',
			titleColor: '#666666',
			filterResult: '',
			buldings: [],
				menuList: [
					{
						'title': '区域',
						'key': 'Area',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '区域',
								'value': ''
							}
						]
					},
					{
						'title': '业态',
						'key': 'HouseType',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '业态',
								'value': ''
							}]
					},{
						'title': '筛选',
						'key': 'LetWay',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '筛选',
								'value': ''
							},
							{
								'title': '出租',
								'value': '1'
							},
							{
								'title': '出售',
								'value': '2'
							}
						]
					}
				]
			}
		},
		onLoad() {
			var me = this;
			me.citys=getApp().globalData.citys;
			if(this.city.id!=getApp().globalData.city.id)
			{
				this.city=getApp().globalData.city;
				this.queryParams.CityId=this.city.id;
			}
			me.loadBuildingList();
			me.loadSelectList();
		},
		onShow(){
			if(this.city.id!=getApp().globalData.city.id)
			{
				this.city=getApp().globalData.city;
				this.queryParams.CityId=this.city.id;
				this.expertList=[],
				this.queryParams.page=1;
				this.isBuildingLeft=true;
				this.loadSelectList();
				this.loadBuildingList();
			}
			
		},
		onPullDownRefresh() {
			this.refreshExpertList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadBuildingList();
		},
		onShareAppMessage(){
			return {
			      title: '选楼盘，查佣金，看房价'
			    }
		},
		methods: {
			
					closeDrawer(e) {
						this.showLeft = false
					},
					showModal(e) {
						this.showLeft = true;
					},
					hideModal() {
						this.showLeft = false;
					},
					tabSelect(e) {
						var selectCity=e.currentTarget.dataset.city;
						if(this.city.id!=selectCity.id)
						{
							getApp().globalData.city=selectCity;
							this.city=selectCity;
							this.queryParams.CityId=selectCity.id;
							this.expertList=[],
							this.queryParams.page=1;
							this.isBuildingLeft=true;
							this.loadSelectList();
							this.loadBuildingList();
							uni.setStorage({
								key:"city",
							    data:this.city
							});
						}
						this.showLeft=false;
					},
					result(val) {
						
						this.queryParams.LetWay=val.LetWay;
						this.queryParams.HouseType=val.HouseType;
						this.queryParams.Area=val.Area;
						this.expertList=[],
						this.queryParams.page=1;
						this.isBuildingLeft=true;
						this.loadBuildingList();
					},
					serach(){
						this.expertList=[],
						this.queryParams.page=1;
						this.isBuildingLeft=true;
						this.loadBuildingList();
					},
					// 重置所有选项，包括默认选项，并更新result
					resetAllSelect() {
						this.$refs.slFilter.resetAllSelect(function(result) {
							console.log('重置之后回调的result:' + JSON.stringify(result))
						})
					},
					// 重置选项为设置的默认值，并更新result
					resetSelectToDefault() {
						this.$refs.slFilter.resetSelectToDefault(function(result) {
							console.log('重置为默认值之后回调的result:' + JSON.stringify(result))
						})
					},
					toDetail() {
						uni.navigateTo({
							url: '/pages/new/detail/detail'
						})
					},
					loadBuildingList() {
						var me = this;
						me.isShowKeywordList = false;
						if (!me.isBuildingLeft) {
							uni.showModal({
								content: '已经到底了!',
								showCancel: false
							});
							return;
						}
						this.isLoading = true;
						uni.request({
							url: me.$rootUrl + '/House/GetList',
							data: me.queryParams,
							method: 'GET',
							success(res) {
								me.isLoading = false;
								if (res.data.success) {
									res.data.items.forEach(n => me.expertList.push(n));
		
									if (me.expertList.length >= res.data.total) {
										me.isBuildingLeft = false;
										me.loadMoreText = me.loadMoreNoLeftText;
									} else {
										me.queryParams.page++;
									}
								} else {
									uni.showModal({
										content: '服务器错误!',
										showCancel: false
									});
								}
							},
							fail() {
								me.isLoading = false;
								me.loadMoreText = me.connectionFailText;
								uni.showModal({
									content: me.connectionFailText,
									showCancel: false
								});
							}
						});
		
					},
					loadSelectList() {
						var me = this;
						uni.request({
							url: me.$rootUrl + '/Dic/GetSaleDicList',
							data: {
								cityId:this.city.id
							},
							method: 'GET',
							success(res) {
								if (res.data.success) {
									me.menuList[0].detailList=res.data.areas;
									me.menuList[1].detailList=res.data.type;
									
								} else {
									uni.showModal({
										content: '服务器错误!',
										showCancel: false
									});
								}
							},
							fail() {
								me.isLoading = false;
								me.loadMoreText = me.connectionFailText;
								uni.showModal({
									content: me.connectionFailText,
									showCancel: false
								});
							}
						});
					
					},
					refreshExpertList() {
						this.expertList = [];
						this.loadMoreText = this.loadMoreDefalutText;
						this.isExpertLeft = true;
						this.queryParams.page = 1;
						this.loadExpertList();
					},
					//监听输入
					inputChange(event) {
						var me=this;
						//兼容引入组件时传入参数情况
						var keyword = event.detail?event.detail.value:event;
						if (!keyword) {
							this.keywordList = [];
							this.isShowKeywordList = false;
							return;
						}
						me.queryParams.Name=me.queryParams.query;
						this.isShowKeywordList = true;
						//以下示例截取淘宝的关键字，请替换成你的接口
						uni.request({
							url: me.$rootUrl + '/House/FindNameListBy',
							data: me.queryParams,
							success: (res) => {
								this.keywordList = [];
								this.keywordList = this.drawCorrelativeKeyword(res.data.items, keyword);
								
							}
						});
					},
					//高亮关键字
					drawCorrelativeKeyword(keywords, keyword) {
						var len = keywords.length,
							keywordArr = [];
						for (var i = 0; i < len; i++) {
							var row = keywords[i];
							//定义高亮#9f9f9f
							var html = row.replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
							html = '<div>' + html + '</div>';
							var tmpObj = {
								keyword: row,
								htmlStr: html
							};
							keywordArr.push(tmpObj)
						}
						return keywordArr;
					},
					//顶置关键字
					setKeyword(index) {
						this.keyword = this.keywordList[index].keyword;
					},
					doSearch(keyword) {
						this.queryParams.query=keyword;
						this.isShowKeywordList = false;
						this.serach();
					},
				}
			}
		</script>
		
		<style lang="scss">
			.content {
		
				.header {
					width: 100%;
					padding: 0 4%;
					height: 100upx;
					display: flex;
					align-items: center;
					position: fixed;
					/* #ifdef H5 */
		
					top: 44px;
					/* #endif */
					/* #ifndef H5 */
					top: 0;
					/* #endif */
					z-index: 10;
					background-color: #fff;
		
					/*  #ifdef  APP-PLUS  */
					top: var(--status-bar-height);
					/*  #endif  */
		
					.addr {
						width: 150upx;
						height: 60upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						font-size: 28upx;
		
						.icon {
							height: 60upx;
							margin-right: 5upx;
							display: flex;
							align-items: center;
							font-size: 42upx;
							color: #ffc50a;
						}
					}
		
					.input-box {
						width: 100%;
						height: 60upx;
						background-color: #f5f5f5;
						border-radius: 30upx;
						position: relative;
						display: flex;
						align-items: center;
		
						.icon {
							display: flex;
							align-items: center;
							position: absolute;
							top: 0;
							right: 0;
							width: 60upx;
							height: 60upx;
							font-size: 34upx;
							color: #c0c0c0;
						}
		
						input {
							padding-left: 28upx;
							height: 28upx;
							font-size: 28upx;
						}
					}
		
					.icon-btn {
						width: 120upx;
						height: 60upx;
						flex-shrink: 0;
						display: flex;
		
						.icon {
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							font-size: 42upx;
						}
					}
				}
		
				.list {
					margin-top: 48px;
		
				}
			}
		
			.text {
				margin-top: 50px;
				margin-left: 20px;
				width: 100%;
			}
			.search-box {width:95%;background-color:rgb(242,242,242);padding:15upx 2.5%;display:flex;justify-content:space-between;position:sticky;top: 0;}
				.search-box .mSearch-input-box{width: 100%;}
				.search-box .input-box {width:85%;flex-shrink:1;display:flex;justify-content:center;align-items:center;}
				.search-box .search-btn {width:15%;margin:0 0 0 2%;display:flex;justify-content:center;align-items:center;flex-shrink:0;font-size:28upx;color:#fff;background:linear-gradient(to right,#ff9801,#ff570a);border-radius:60upx;}
				.search-box .input-box>input {width:100%;height:60upx;font-size:32upx;border:0;border-radius:60upx;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 3%;margin:0;background-color:#ffffff;}
				.placeholder-class {color:#9e9e9e;}
				.search-keyword {width:100%;background-color:rgb(242,242,242);position: fixed;z-index: 10000;top: 87upx;}
				.keyword-list-box {padding-top:10upx;border-radius:20upx 20upx 0 0;background-color:#fff;}
				.keyword-entry-tap {background-color:#eee;}
				.keyword-entry {width:94%;height:80upx;margin:0 3%;font-size:30upx;color:#333;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 1upx #e7e7e7;}
				.keyword-entry image {width:60upx;height:60upx;}
				.keyword-entry .keyword-text,.keyword-entry .keyword-img {height:80upx;display:flex;align-items:center;}
				.keyword-entry .keyword-text {width:90%;}
				.keyword-entry .keyword-img {width:10%;justify-content:center;}
				.keyword-box {height:calc(100vh - 110upx);border-radius:20upx 20upx 0 0;background-color:#fff;}
				.keyword-box .keyword-block {padding:10upx 0;}
				.keyword-box .keyword-block .keyword-list-header {width:94%;padding:10upx 3%;font-size:27upx;color:#333;display:flex;justify-content:space-between;}
				.keyword-box .keyword-block .keyword-list-header image {width:40upx;height:40upx;}
				.keyword-box .keyword-block .keyword {width:94%;padding:3px 3%;display:flex;flex-flow:wrap;justify-content:flex-start;}
				.keyword-box .keyword-block .hide-hot-tis {display:flex;justify-content:center;font-size:28upx;color:#6b6b6b;}
				.keyword-box .keyword-block .keyword>view {display:flex;justify-content:center;align-items:center;border-radius:60upx;padding:0 20upx;margin:10upx 20upx 10upx 0;height:60upx;font-size:28upx;background-color:rgb(242,242,242);color:#6b6b6b;}
			
		</style>